<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.test {
	font-size: 12px;
	width: 200px;
	height: 50px;
	background-color: red;
}
.testfloat {
	font-size: 12px;
	width: 200px;
	height: 50px;
	background-color: green;
	float: left;
}

.testfloatright {
	font-size: 12px;
	width: 200px;
	height: 50px;
	background-color: green;
	float: right;
}
</style>
</head>
<body>
	<!-- 实验1 -->
	<div class="test">1先不浮动</div>
	<div class="testfloat">再浮动，因上面块级原因，转到下面显示</div>
	跟随机浮动的文本
	<div style="clear: both"></div>
	<p>--------------清除浮动------------------------</p>

	<!-- 实验2 -->
	<div class="testfloat">2先浮动，后面跟的不浮动占据此空间（在底下），而在其下显示文字</div>
	<div class="test">再不浮动</div>
	<div style="clear: both"></div>
	<p>--------------清除浮动------------------------</p>

	<!-- 实验3 -->
	跟随的浮动文字
	<div class="testfloat">3先浮动</div>
	<div class="test">再不浮动</div>
	<div style="clear: both"></div>
	<p>--------------清除浮动------------------------</p>

	<!-- 实验4 -->
	<div class="testfloat">4先浮动，立即清除，后面的不浮动块级元素特征重现，请与2比较</div>
	<div style="clear: both"></div>
	<div class="test">再不浮动</div>
	<div style="clear: both"></div>
	<p>--------------清除浮动------------------------</p>

	<!-- 实验5 -->
	<div class="testfloat">5先浮动</div>
	<div class="testfloat">5再浮动</div>
	<div class="test">再不浮动，位置与第一个浮动的位置重合</div>

</body>
</html>